<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor AI 功能对比：ASK vs Agent</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .feature-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .table-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        .drop-cap {
            float: left;
            font-size: 4rem;
            line-height: 1;
            font-weight: 700;
            margin-right: 0.5rem;
            color: #667eea;
            font-family: 'Noto Serif SC', serif;
        }
        .section-divider {
            height: 2px;
            background: linear-gradient(to right, transparent, #667eea, transparent);
            margin: 3rem 0;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6 text-center">
            <h1 class="text-5xl font-bold mb-4">Cursor AI 功能对比</h1>
            <p class="text-2xl mb-8 opacity-90">深入了解 ASK 与 Agent 的差异与应用场景</p>
            <div class="flex justify-center space-x-4">
                <div class="bg-white bg-opacity-20 rounded-lg px-6 py-3 backdrop-blur-sm">
                    <i class="fas fa-comments text-3xl mb-2"></i>
                    <p class="text-sm">交互问答</p>
                </div>
                <div class="bg-white bg-opacity-20 rounded-lg px-6 py-3 backdrop-blur-sm">
                    <i class="fas fa-robot text-3xl mb-2"></i>
                    <p class="text-sm">智能代理</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container mx-auto px-6 py-12">
        <!-- Introduction Cards -->
        <div class="grid md:grid-cols-2 gap-8 mb-12">
            <!-- ASK Card -->
            <div class="bg-white rounded-2xl shadow-xl p-8 card-hover">
                <div class="flex items-center mb-6">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mr-4">
                        <i class="fas fa-comments text-3xl feature-icon"></i>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800">ASK</h2>
                        <p class="text-gray-600">AI Sidebar Knowledge</p>
                    </div>
                </div>
                <p class="text-gray-700 mb-4 leading-relaxed">
                    <span class="drop-cap">交</span>互问答聊天功能，让您能够快速获得代码相关的解答。
                </p>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
                        <span class="text-gray-700">是Cursor中的一个功能，允许用户向AI提问关于代码的问题</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
                        <span class="text-gray-700">主要是一个<strong>问答交互界面</strong>，位于编辑器侧边栏</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
                        <span class="text-gray-700">不会主动搜索代码库，只基于当前可见内容和上下文回答问题</span>
                    </li>
                </ul>
            </div>

            <!-- Agent Card -->
            <div class="bg-white rounded-2xl shadow-xl p-8 card-hover">
                <div class="flex items-center mb-6">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mr-4">
                        <i class="fas fa-robot text-3xl feature-icon"></i>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800">Agent</h2>
                        <p class="text-gray-600">智能代码助手</p>
                    </div>
                </div>
                <p class="text-gray-700 mb-4 leading-relaxed">
                    <span class="drop-cap">创</span>建文件，生成代码，全方位的智能开发助手。
                </p>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
                        <span class="text-gray-700">是更强大的AI助手模式，可以主动浏览和理解整个代码库</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
                        <span class="text-gray-700">能够执行复杂任务，如<strong>搜索相关文件、分析代码结构、创建文件</strong>等</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
                        <span class="text-gray-700">可以"思考"并采取多步骤行动来解决问题</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="section-divider"></div>

        <!-- Comparison Section -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-12">
            <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
                <i class="fas fa-balance-scale mr-3 text-purple-600"></i>主要区别
            </h2>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="table-header text-white">
                            <th class="px-6 py-4 text-left rounded-tl-lg">特性</th>
                            <th class="px-6 py-4 text-left">ASK</th>
                            <th class="px-6 py-4 text-left rounded-tr-lg">Agent</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-b hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 font-medium text-gray-700">
                                <i class="fas fa-eye mr-2 text-purple-600"></i>代码理解范围
                            </td>
                            <td class="px-6 py-4 text-gray-600">仅当前可见内容</td>
                            <td class="px-6 py-4 text-gray-600">整个代码库</td>
                        </tr>
                        <tr class="border-b hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 font-medium text-gray-700">
                                <i class="fas fa-bolt mr-2 text-purple-600"></i>主动性
                            </td>
                            <td class="px-6 py-4 text-gray-600">被动回答问题</td>
                            <td class="px-6 py-4 text-gray-600">主动探索和分析</td>
                        </tr>
                        <tr class="border-b hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 font-medium text-gray-700">
                                <i class="fas fa-cogs mr-2 text-purple-600"></i>执行能力
                            </td>
                            <td class="px-6 py-4 text-gray-600">仅提供建议和解释</td>
                            <td class="px-6 py-4 text-gray-600">可执行搜索和分析任务</td>
                        </tr>
                        <tr class="border-b hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 font-medium text-gray-700">
                                <i class="fas fa-bullseye mr-2 text-purple-600"></i>适用场景
                            </td>
                            <td class="px-6 py-4 text-gray-600">简单问题和当前文件解释</td>
                            <td class="px-6 py-4 text-gray-600">复杂问题和跨文件分析</td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 font-medium text-gray-700">
                                <i class="fas fa-tachometer-alt mr-2 text-purple-600"></i>资源消耗
                            </td>
                            <td class="px-6 py-4 text-gray-600">较低</td>
                            <td class="px-6 py-4 text-gray-600">较高</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Interactive Diagram -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-12">
            <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
                <i class="fas fa-project-diagram mr-3 text-purple-600"></i>功能关系图
            </h2>
            <div class="mermaid">
                graph TD
                    A[Cursor AI] --> B[ASK]
                    A --> C[Agent]
                    B --> D[问答交互]
                    B --> E[当前文件分析]
                    B --> F[代码解释]
                    C --> G[代码库搜索]
                    C --> H[文件创建]
                    C --> I[结构分析]
                    C --> J[多步骤任务]
                    
                    style A fill:#667eea,stroke:#fff,stroke-width:2px,color:#fff
                    style B fill:#a78bfa,stroke:#fff,stroke-width:2px,color:#fff
                    style C fill:#8b5cf6,stroke:#fff,stroke-width:2px,color:#fff
            </div>
        </div>

        <div class="section-divider"></div>

        <!-- Usage Scenarios -->
        <div class="grid md:grid-cols-2 gap-8 mb-12">
            <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-8">
                <h3 class="text-2xl font-bold text-gray-800 mb-6">
                    <i class="fas fa-lightbulb mr-3 text-purple-600"></i>适合使用 ASK 的情况
                </h3>
                <ul class="space-y-4">
                    <li class="flex items-start">
                        <i class="fas fa-arrow-right text-purple-600 mt-1 mr-3"></i>
                        <span class="text-gray-700">对当前正在编辑的代码有简单疑问</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-arrow-right text-purple-600 mt-1 mr-3"></i>
                        <span class="text-gray-700">需要对特定代码片段的解释</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-arrow-right text-purple-600 mt-1 mr-3"></i>
                        <span class="text-gray-700">请求简单的代码示例或修改建议</span>
                    </li>
                </ul>
            </div>

            <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-8">
                <h3 class="text-2xl font-bold text-gray-800 mb-6">
                    <i class="fas fa-rocket mr-3 text-purple-600"></i>适合使用 Agent 的情况
                </h3>
                <ul class="space-y-4">
                    <li class="flex items-start">
                        <i class="fas fa-arrow-right text-purple-600 mt-1 mr-3"></i>
                        <span class="text-gray-700">需要理解项目整体结构</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-arrow-right text-